<template>
    <n-form
        ref="formRef"
        label-placement="left"
        :label-width="100"
        :model="form"
        :rules="rules"
    >
        <n-grid cols="2" x-gap="24">
            <n-gi>
                <n-form-item label="账号类型" path="type">
                    <jb-select
                        v-model:value="form.type"
                        url="/api/admin/dictionary/options?typeKey=qiniu_type"
                        filterable
                        placeholder="=请选择="
                        class="w-140px"
                    >
                    </jb-select>
                </n-form-item>
                <n-form-item label="账号" path="name">
                    <n-input v-model:value="form.name" placeholder="请输入账号" />
                </n-form-item>
                <n-form-item label="编号SN" path="sn">
                    <n-input v-model:value="form.sn" placeholder="请输入编号SN" />
                </n-form-item>
            </n-gi>
            <n-gi>
                <n-form-item label="AK" path="ak">
                    <n-input v-model:value="form.ak" placeholder="请输入AK" />
                    <jb-btn
                        class="ml-1"
                        tip-text="如何获取账户AK"
                        icon="mingcute:question-fill"
                        quaternary
                        circle
                        url="https://portal.qiniu.com/user/key"
                        is-link-btn
                    ></jb-btn>
                </n-form-item>
                <n-form-item label="SK" path="sk">
                    <n-input v-model:value="form.sk" placeholder="请输入SK" />
                    <jb-btn
                        class="ml-1"
                        tip-text="如何获取账户SK"
                        icon="mingcute:question-fill"
                        url="https://portal.qiniu.com/user/key"
                        is-link-btn
                        quaternary
                        circle
                    ></jb-btn>
                </n-form-item>
                <n-form-item label="是否默认">
                    <jb-radio-group
                        v-model:value="form.isDefault"
                        :value-to-boolean="true"
                        url="/api/admin/dictionary/options?typeKey=options_boolean"
                    ></jb-radio-group>
                </n-form-item>
                <n-form-item label="备注">
                    <n-input
                        v-model:value="form.remark"
                        type="textarea"
                        placeholder="请输入备注"
                    />
                </n-form-item>
            </n-gi>
        </n-grid>
    </n-form>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import type { FormInst, FormRules } from 'naive-ui'
import { Rules } from '@/utils'
import { JBoltApi } from '@/utils/request'
import { useResetableData } from '@/hooks/common/use-resetable-data'
import { ResData } from '@/typings/request'

const props = withDefaults(
    defineProps<{
        id: string
    }>(),
    {
        id: ''
    }
)

/** 表单相关 start */
const formRef = ref<FormInst | null>()
interface AccountType {
    id: string
    type: string
    name: string
    sn: string
    ak: string
    sk: string
    isDefault: boolean
    typeKey: string
    remark: string
}
const form = useResetableData<AccountType>({
    id: '',
    type: '',
    name: '',
    sn: '',
    ak: '',
    sk: '',
    isDefault: false,
    typeKey: '',
    remark: ''
})
const rules: FormRules = {
    name: new Rules().required('请输入账号').value,
    type: new Rules().required('请输入账号类型').value,
    sn: new Rules().required('请输入编号SN').value,
    ak: new Rules().required('请输入标识AK').value,
    sk: new Rules().required('请输入标识SK').value
}

/**
 * 提交表单
 */
async function submit() {
    await formRef.value?.validate()

    let url = props.id ? '/api/admin/qiniu/update' : '/api/admin/qiniu/save'
    await JBoltApi.tryPost(url, form)
    return true
}

function loadEditData() {
    JBoltApi.get<ResData>(`/api/admin/qiniu/${props.id}`).then(({ error, result }) => {
        if (error) return
        result.data.type += ''
        form._reset(result.data)
    })
}

onMounted(() => {
    if (props.id) {
        loadEditData()
    }
})

defineExpose({
    submit
})

/** 表单相关 end */
</script>
<style scoped></style>
